<template>
	<d2-container v-show="goodsAddShow">
		<div slot="header">
			<el-link type="primary" @click="goodsAddShow = false">
				<i class="el-icon-back"></i>
				返回
			</el-link>
		</div>
		<div style="width: 500px;">
			<el-form ref="form" :model="form" label-width="100px">
				<el-form-item label="商品名称" prop="name"><el-input v-model="form.name"></el-input></el-form-item>
				<el-form-item label="商品价格" prop="price"><el-input v-model="form.price"></el-input></el-form-item>
				<el-form-item label="商品排序" prop="sort"><el-input v-model="form.sort"></el-input></el-form-item>
				<el-form-item label="是否上架" prop="state">
					<el-radio :label="1" v-model="form.state">上架</el-radio>
					<el-radio :label="2" v-model="form.state">下架</el-radio>
				</el-form-item>
				<el-form-item label="是否推荐" prop="is_tj">
					<el-radio :label="2" v-model="form.is_tj">否</el-radio>
					<el-radio :label="1" v-model="form.is_tj">是</el-radio>
				</el-form-item>
				<el-form-item label="荤素主食" prop="hunsu">
					<el-radio :label="2" v-model="form.hunsu">素</el-radio>
					<el-radio :label="1" v-model="form.hunsu">荤</el-radio>
					<el-radio :label="3" v-model="form.hunsu">主食</el-radio>
				</el-form-item>
				<el-form-item label="是否自选套餐" prop="zixuan">
					<el-radio :label="1" v-model="form.zixuan">是</el-radio>
					<el-radio :label="2" v-model="form.zixuan">否</el-radio>
				</el-form-item>
				<el-form-item label="商品分类">
					<el-select placeholder="请选择商品分类" v-model="form.category">
						<el-option v-for="(item, key) in classData" :label="item.name" :key="key" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品单位">
					<el-select placeholder="请选择商品单位" v-model="form.ggid">
						<el-option v-for="(item, key) in Company" :label="item.name" :key="key" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品描述" prop="des"><el-input type="textarea" v-model="form.des"></el-input></el-form-item>
				<el-form-item label="商品缩略图">
					<el-upload
						action="managea/Tphoto"
						list-type="picture-card"
						:on-remove="handleRemove"
						:on-error="handlError"
						:on-exceed="handlExceed"
						:on-success="handlSuccess"
						:before-upload="beforeAvatarUpload"
						:file-list="fileList"
						:limit="1"
					>
						<i class="el-icon-plus"></i>
					</el-upload>
					<div style="color: red;">建议图片尺寸750*490像素</div>
				</el-form-item>
				<el-form-item label="商品轮播图">
					<el-upload
						action="managea/Tphoto"
						list-type="picture-card"
						:on-remove="handleRemoveBanner"
						:on-error="handlErrorBanner"
						:on-success="handlSuccessBanner"
						:file-list="fileListBanner"
						:before-upload="beforeAvatarUpload"
					>
						<i class="el-icon-plus"></i>
					</el-upload>
					<div style="color: red;">建议图片尺寸1242*700像素</div>
				</el-form-item>
				<el-form-item></el-form-item>
			</el-form>
		</div>
		<div slot="footer">
			<div style="float: right;">
				<el-button type="primary" @click="onProSubmit">确定</el-button>
				<el-button @click="goodsAddShow = false">取消</el-button>
			</div>
		</div>
	</d2-container>
</template>

<script>
import { getGuige,postProductAdd,getCategory,getProductEdit,postProductUpdate  } from '@api/api';
export default {
	props: {
		value: Boolean,
		id: Number
	},
	watch: {
		value(val) {
			if (val) {
				this.goodsAddShow = val;
				this.getGuiGe();
				this.getClass()
			} else {
			}
		},
		goodsAddShow(val) {
			if (val && this.id != -1) {
				//修改
				this.getComUpdata()
			} else {
				this.$parent.getProductData()
				this.$emit('input', val);
				this.form={};
				this.fileList=[];
				this.fileListBanner=[]
			}
		}
	},
	data() {
		return {
			goodsAddShow: false,
			form: {
				ggid: '',
				category: '',
				name: '',
				thumb: '',
				image: '',
				des: '',
				price: '',
				sort: 0,
				is_tj: 2,
				state: 1,
				hunsu:'',
				zixuan:''
			},
			//商品单位
			Company: [],
			classData:[],		//分类
			fileListBanner: [], //商品轮播图
			fileList: [], //商品主图
			ListImage:[],
			baseUrl:process.env.VUE_APP_URL
		};
	},
	methods: {
		//修改加载
		getComUpdata(){
			getProductEdit(this.id).then(res=>{
				if(res.state==0){
					this.form=res.data
					if(res.data.thumb!=undefined&&res.data.thumb!=''){
						var thumbArr=res.data.thumb.split(",");	//字符串分割
						for(var i=0;i<thumbArr.length;i++){
							let str={
								url:this.baseUrl+thumbArr[i],
								image:thumbArr[i]
							}
							this.fileList.push(str)
						}
					}
					if(res.data.image!=undefined&&res.data.image!=''){
						var imageArr=res.data.image.split(",")
						for(var i=0;i<imageArr.length;i++){
							let str={
								url:this.baseUrl+imageArr[i],
								image:imageArr[i]
							}
							this.fileListBanner.push(str)
						}
					}
				}
			})
		},
		//单位
		getGuiGe() {
			getGuige().then(res => {
				if (res.state == 0) {
					this.Company = res.data.data;
				}
			});
		},
		getClass(){
			getCategory().then(res=>{
				if(res.state==0){
					this.classData=res.data.data
				}
			})
		},
		onProSubmit(){
			var fileListArr =[]
			for(var i=0;i<this.fileList.length;i++){
				if(this.fileList[i].response!=undefined){
					console.log(this.fileList[i].response.data[1])
					fileListArr.push(this.fileList[i].response.data[1])
				}else{
					console.warn(this.fileList[i].image)
					fileListArr.push(this.fileList[i].image)
				}
			}
			var fileListBannerArr=[]
			for(var i=0;i<this.fileListBanner.length;i++){
				if(this.fileListBanner[i].response!=undefined){
					console.log(this.fileListBanner[i].response.data[1])
					fileListBannerArr.push(this.fileListBanner[i].response.data[1])
				}else{
					console.warn(this.fileListBanner[i].image)
					fileListBannerArr.push(this.fileListBanner[i].image)
				}
			}
			this.form.thumb = fileListArr.join(','); //主图
			this.form.image=fileListBannerArr.join(',')	//轮播图
			let data={
				thumb:this.form.thumb,
				image:this.form.image,
				ggid: this.form.ggid,
				category: this.form.category,
				name:this.form.name,
				thumb: this.form.thumb,
				image: this.form.image,
				des: this.form.des,
				price: this.form.price,
				sort: this.form.sort,
				is_tj: this.form.is_tj,
				state: this.form.state,
				hunsu:this.form.hunsu,
				zixuan:this.form.zixuan
			}
			if(this.id==-1){  //添加
				postProductAdd(data).then(res=>{
					if(res.state==0){
						this.$message.success("添加成功");
						this.goodsAddShow=false
					}
				})
			}else{
				console.log(this.fileList)
				console.log(this.fileListBanner)
				data.id=this.id
				postProductUpdate(data).then(res=>{
					if(res.state==0){
						this.$message.success("修改成功");
						this.goodsAddShow=false
					}
				})
			}
		},
		// 商品图上传
		handlSuccess(response, file, fileList) {
			this.fileList = fileList;
		},
		handleRemove(file, fileList) {
			this.fileList = fileList;
		},
		handlError(err, file, fileList) {
			console.log(err, file, fileList);
			this.$message.error('图片上传失败！');
		},
		handlExceed(files, fileList) {
			if (fileList.length >= 1) {
				this.$message.error('只能上传一张图片');
			}
		},
		//轮播图
		handlSuccessBanner(response, file, fileList) {
			this.fileListBanner = fileList;
		},
		handleRemoveBanner(file, fileList) {
			this.fileListBanner = fileList;
		},
		handlErrorBanner(err, file, fileList) {
			console.log(err, file, fileList);
			this.$message.error('图片上传失败！');
		},
		//图片上传 限制大小
		beforeAvatarUpload(file) {
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('图片大小不能超过 2MB!');
			}
		}
	}
};
</script>

<style></style>
